<template>
	<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
		<el-row type="flex" class="h-100">
			<cl-biz-toolbar v-model="currBiz.biz_id" @change="changeBiz" />
			<cl-flex1 class="h-100" style="overflow: hidden">
				<cl-pagefull @resize="onResize">
					<template #head>
						<el-row type="flex" class="pb-1">
							<span class="title">{{ currBiz.biz_name }}</span>
						</el-row>
					</template>
					<cl-table
						class="list"
						v-bind="table"
						:props="{
							maxHeight: maxHeight
						}"
					>
						<cl-empty slot="empty" />
						<template #column-status="{ scope: { row } }">
							<el-tag :type="row.status == 1 ? 'primary' : 'danger'" size="mini">
								{{ row.status == 1 ? "启用" : "停用" }}
							</el-tag>
						</template>
						<template #column-opt="{ scope: { row } }">
							<div class="flex flex-justify-center">
								<el-button
									:type="row.status == 1 ? 'danger' : 'primary'"
									@click="edit(row)"
								>
									{{ row.status == 1 ? "停用" : "启用" }}
								</el-button>
							</div>
						</template>
					</cl-table>
				</cl-pagefull>
			</cl-flex1>
		</el-row>
	</cl-crud>
</template>
<script>
import dayjs from "dayjs";
export default {
	name: "SetEarnestPaySet",
	data() {
		return {
			dayjs,
			table: {
				"context-menu": ["refresh"],
				columns: [
					{ type: "index", label: "#", align: "center", width: 50, fixed: true },
					{
						label: "支付方式",
						prop: "pay_name",
						minWidth: 120
					},
					{ label: "支付类型", prop: "pay_type_name", minWidth: 120 },
					{ label: "启用状态", prop: "status", width: 120 },
					{ label: "操作", prop: "opt", width: 100 }
				]
			},
			currBiz: {
				biz_id: ""
			},
			maxHeight: 500,
			load: false
		};
	},
	methods: {
		onResize(h) {
			this.maxHeight = h;
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.config)
				.set("dict", {
					api: {
						page: "payList"
					}
				})
				.done();
			app.refresh();
		},
		// crud刷新
		refresh() {
			this.load = true;
			this.$refs.crud.refresh({ page: 1 });
		},
		async onRefresh(params, { next, render, done }) {
			if (!this.load) {
				done();
				return;
			}
			const { biz_id } = this.currBiz;
			let query = {
				...params,
				biz_id
			};
			const data = await next(query);
			render(data);
		},
		changeBiz(v) {
			this.currBiz = v;
			this.refresh();
		},
		// 修改
		async edit(row) {
			this.confirm("你确定要更改吗, 是否继续?")
				.then(async () => {
					await this.$service.config.payEdit({
						pay_id: row.pay_id
					});
					this.$message.success("修改成功");
					this.refresh();
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "已取消"
					});
				});
		}
	}
};
</script>
<style lang="scss" scoped>
.title {
	font-size: 18px;
}
</style>
